<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css"></style>
    <script src="/static/index/js/jquery-1.8.3.min.js"></script>
    <script src="/static/layer/layer.js"></script>
    <link rel="stylesheet" href="/static/index/bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="/static/index/lesson/css/lesson.css">
    <link rel="stylesheet" href="/static/layer/mobile/need/layer.css">
</head>
<body>
<!-- 头部导航(选择课时)  -->
<div class="head row">
    <div class="col-md-8 study">
        <div class="class row">
            <div class="col-md-1"></div>
            <div class="col-md-11" style="overflow: hidden; height: 50px ;">
                {$classname}
            </div>
        </div>
    </div>
    <div class="col-md-1"></div>
    <div class="col-md-3 note"></div>
</div>
<!--头部结束-->

<!--开始视频主体-->
<div class="row">
    <!--视频-->
    <div class="col-md-9 video">
        <video src="/static/resvideo/666.mp4" preload="none" controls="controls"  style="width: 100%; height:100%; object-fit: fill" poster="/static/2.jpg">
        </video>
    </div>

    <!--笔记-->
    <div class="col-md-3 notes">
        <div class="row caption">笔记</div>
        <div id="biji">
            <div class="row add-nodes">
                <div class="col-md-1 writeNode" style="font-size: 20px">
                    <span class=" glyphicon glyphicon-plus"></span>
                </div>
                <div class="col-md-9 tishi" style="display: block;">
                    点击添加新笔记
                </div>

                <div class="col-md-9 addNote" style="display: none;" >
                    <textarea  name="" id="content" cols="30" rows="5"></textarea>
                    <div class="row">
                        <div class="col-md-4 col-md-offset-8 btn-add">
                            <a href="javascript:0;" class="doAddNote">增加</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="noteslist" data-class-id="{$classid}" classname="{$classname}" data-cid="{$cid}">
                {volist name="notes" id="v"}
                <div class="row oneNote{$v['id']}">
                    <div class="col-md-9 col-md-offset-1" >
                        <textarea edit-id="{$v['id']}" class="notelist" name="" id="" cols="30" >{$v['content']}</textarea>
                        <div class="row">
                            <div class="col-md-2 createt">{:date('Y/m/d',$v['updatetime'])}</div>
                            <div class="col-md-4 col-md-offset-6 btn-del" style="font-size: 10px">
                                <div class="row">
                                    <div class="col-md-4">

                                    </div>
                                    <div class="col-md-4 del-btn"  onclick="delajax('{$v['id']}')">
                                        <span class=" glyphicon glyphicon-trash"></span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                {/volist}
            </div>
        </div>


    </div>
</div>


<!--结束主体-->

{js href="/static/index/bootstrap/js/jquery-2.1.4.min.js"}
<script language="javascript">

    // 高度自适应

    // 点击弹出添加笔记
    $('.writeNode, .tishi').click(function(){
        $('#content').val('');
        $('.tishi').toggle();
        $('.addNote').toggle();
    });

    // 点击添加笔记
    $('.doAddNote').click(function(){
        var cid = $('.noteslist').attr('data-class-id') ;
        var content = $('#content').val();
        var uniteid = $('.noteslist').attr('data-cid');
        var classname = $('.noteslist').attr('classname');

        $.ajax({
            type : 'post',
            url : '/addWebNotes',
            data : {
                'uniteid' : uniteid,
                'classname' : classname,
                'cid' : cid,
                'content' : content
            },
            success :function(data){
                if(data > 0){
                    str = '<div class="row oneNote'+data+'" ><div class="col-md-9 col-md-offset-1" ><textarea edit-id="'+data+'" class="notelist" name="" id="" cols="30" >'+content+'</textarea><div class="row"><div class="col-md-2 createt"></div><div class="col-md-4 col-md-offset-6 btn-del" style="font-size: 10px"><div class="row"><div class="col-md-4"></div><div class="col-md-4 del-btn" del-id="" onclick="delajax('+data+')"><span class=" glyphicon glyphicon-trash"></span></div></div></div></div></div></div>';
                    $('.noteslist').prepend(str);
                    layer.msg('添加成功', {icon: 1});
                    $('.addNote').hide();
                    $('.tishi').show('slow');
                } else {
                    layer.msg('添加失败', {icon: 2});
                }
            },
            error : function(data){

            }
        })
    });

    // 修改笔记
    $('.notelist').click(function(){
        $(this).focusout(function(){
            var content = $(this).val();
            var nid = $(this).attr('edit-id');
            $.ajax({
                type : 'post',
                url : '/ajaxUpdate',
                data : {
                    'content' : content,
                    'id' : nid
                },
                success :function(data){

                },
                error : function(data){

                }

            })
        });
    });


    // 删除笔记
    function delajax(id){
        layer.confirm('你确定要删除该笔记?', {icon: 3, title:'提示'}, function(index){

            $.ajax({
                type : 'post',
                url : '/ajaxDelete',
                data : {
                    'id' : id
                },
                success :function(data){
                    if(data == 200){
                        layer.msg('删除成功', {icon: 1});
                        $('.oneNote'+id).remove();
                    }
                },
                error : function(data){

                }

            });
            layer.close(index);
        });
    }


</script>
</body>
</html>